@ibiz-template-plugin/ibiz-file-previewer 0.0.8 → 0.0.10

package/dist/index.es.js

@@ -958,8 +958,8 @@ var EngineType = /* @__PURE__ */ ((EngineType2) => {
 })(EngineType || {});
 const FileTypeEngineMap = /* @__PURE__ */ new Map([
   ["html", [
-    "MD"
-    /* MD */
+    "HTML"
+    /* HTML */
   ]],
   // HTML类型文件
   ["md", [
@@ -1190,18 +1190,16 @@ function u(e2, t2, n2, o2, i2, u2) {
   return l$3.vnode && l$3.vnode(l2), l2;
 }
 const FilePreviewHtml = (props) => {
+  const containerRef = A(null);
   y$1(() => {
+    if (containerRef.current) {
+      const shadowRoot = containerRef.current.attachShadow({ mode: "open" });
+      const content = '\n        <style>\n          .content-container {\n            height: 100%;\n            width: 100%;\n          }\n        </style>\n        <div class="content-container">\n          '.concat(props.controller.state.value.content, "\n        </div>\n      ");
+      shadowRoot.innerHTML = content;
+    }
     props.onInitialization();
   }, []);
-  return /* @__PURE__ */ u("div", { className: "file-preview-html ".concat(props.controller.state.value.theme), children: /* @__PURE__ */ u(
-    "div",
-    {
-      className: "container",
-      dangerouslySetInnerHTML: {
-        __html: props.controller.state.value.content
-      }
-    }
-  ) });
+  return /* @__PURE__ */ u("div", { className: "file-preview-html ".concat(props.controller.state.value.theme), children: /* @__PURE__ */ u("div", { ref: containerRef, className: "container" }) });
 };
 const ZoomOutSvg = () => {
   return /* @__PURE__ */ u(
@@ -18412,7 +18410,7 @@ const ImagePage = (props) => {
     let result = {};
     if (isLoading.value) {
       result = {
-        height: "".concat(parentStyle.value.height, "px"),
+        height: "".concat(parentStyle.value.height * props.state.value.scale, "px"),
         flexShrink: 0
       };
     } else {
@@ -18422,7 +18420,7 @@ const ImagePage = (props) => {
       };
       if (props.state.value.mode === ImageMode.WIDTH) {
         Object.assign(result, {
-          width: "".concat(parentStyle.value.width * props.state.value.scale, "px")
+          width: "".concat((parentStyle.value.width - 24 - 6) * props.state.value.scale, "px")
         });
       } else if (props.state.value.mode === ImageMode.PAGE) {
         Object.assign(result, {
@@ -18452,28 +18450,15 @@ const ImagePage = (props) => {
       width: rect.width
     };
   };
-  const emitImageStyle = () => {
-    if (!imgRef.current) {
-      return;
-    }
-    const rect = imgRef.current.getBoundingClientRect();
-    if (!rect) return;
-    if (rect.height) {
-      props.onSizeChange(rect.height);
-    }
-  };
   y$1(() => {
     updateParentStyle();
     const observer = new ResizeObserver(updateParentStyle);
-    const imgObserver = new ResizeObserver(emitImageStyle);
     if (imgRef.current) {
-      imgObserver.observe(imgRef.current);
       if (imgRef.current.parentElement) {
         observer.observe(imgRef.current.parentElement);
       }
     }
     return () => {
-      imgObserver.disconnect();
       observer.disconnect();
     };
   }, []);
@@ -18485,7 +18470,7 @@ const ImagePage = (props) => {
       style: imgStyle.value,
       "data-page-index": props.index,
       children: [
-        /* @__PURE__ */ u(
+        props.isShowImage ? /* @__PURE__ */ u(
           "img",
           {
             className: "image-content",
@@ -18499,7 +18484,7 @@ const ImagePage = (props) => {
             },
             loading: "lazy"
           }
-        ),
+        ) : /* @__PURE__ */ u(Loading, {}),
         isLoading.value && /* @__PURE__ */ u(Loading, {})
       ]
     }
@@ -18511,8 +18496,7 @@ const FilePreviewImageGroup = (props) => {
   const contentRef = A(null);
   const isScrolling = useSignal(false);
   const [loadedPages, setLoadedPages] = d$2(/* @__PURE__ */ new Set());
-  const imgContainerHeight = useSignal(0);
-  const handleScroll = throttle(() => {
+  const computeClosestPage = () => {
     if (contentRef.current) {
       const containerRect = contentRef.current.getBoundingClientRect();
       let closestPage = state.value.currentPage;
@@ -18530,11 +18514,27 @@ const FilePreviewImageGroup = (props) => {
           }
         }
       });
+      return closestPage;
+    }
+  };
+  const handleScroll = throttle(() => {
+    if (contentRef.current) {
+      const closestPage = computeClosestPage();
       if (!isScrolling.value && closestPage !== state.value.currentPage) {
         controller.updateState({ currentPage: closestPage });
       }
     }
   }, 100);
+  const handleImageResize = () => {
+    if (contentRef.current) {
+      setTimeout(() => {
+        const closestPage = computeClosestPage();
+        if (closestPage !== state.value.currentPage) {
+          controller.updateState({ currentPage: closestPage });
+        }
+      }, 0);
+    }
+  };
   const scrollToPage = (pageIndex) => {
     if (contentRef.current) {
       const pageElement = contentRef.current.querySelector(
@@ -18554,14 +18554,17 @@ const FilePreviewImageGroup = (props) => {
       }
     });
   };
-  const handlePageClick = (pageIndex) => {
-    controller.updateState({ currentPage: pageIndex });
-    scrollToPage(pageIndex);
+  const updateIsScrolling = () => {
     isScrolling.value = true;
     setTimeout(() => {
       isScrolling.value = false;
     }, 1e3);
   };
+  const handlePageClick = (pageIndex) => {
+    controller.updateState({ currentPage: pageIndex });
+    scrollToPage(pageIndex);
+    updateIsScrolling();
+  };
   const handleInput = (e2) => {
     const target = e2.target;
     const newPage = parseInt(target.value) - 1;
@@ -18588,10 +18591,10 @@ const FilePreviewImageGroup = (props) => {
   const handleModeChange = (payload) => {
     const value = payload.target.value;
     controller.switchMode(value);
+    scrollToPage(state.value.currentPage);
   };
   y$1(() => {
     if (contentRef.current) {
-      imgContainerHeight.value = contentRef.current.clientHeight;
       contentRef.current.addEventListener("scroll", handleScroll);
     }
     preloadImages();
@@ -18605,10 +18608,7 @@ const FilePreviewImageGroup = (props) => {
     /* @__PURE__ */ u(
       "div",
       {
-        className: "image-group-left-container",
-        style: {
-          visibility: state.value.showThumbnailPanel ? "visible" : "hidden"
-        },
+        className: "image-group-left-container ".concat(state.value.showThumbnailPanel ? "image-group-left-container--open" : ""),
         children: /* @__PURE__ */ u(
           ThumbnailPanel,
           {
@@ -18646,30 +18646,15 @@ const FilePreviewImageGroup = (props) => {
               setLoadedPages((prev) => new Set(prev).add(index));
             }
           }
-          return shouldRender || shouldKeepLoaded ? /* @__PURE__ */ u(
+          return /* @__PURE__ */ u(
             ImagePage,
             {
               page,
               index,
               state,
-              onSizeChange: (height) => {
-                imgContainerHeight.value = height;
-              }
+              isShowImage: shouldRender || shouldKeepLoaded
             },
             index
-          ) : (
-            // 渲染占位元素，保持布局结构
-            /* @__PURE__ */ u(
-              "div",
-              {
-                "data-page-index": index,
-                style: {
-                  height: "".concat(imgContainerHeight, "px"),
-                  flexShrink: 0
-                }
-              },
-              index
-            )
           );
         })
       }
@@ -18735,8 +18720,13 @@ const FilePreviewImageGroup = (props) => {
             value: state.value.currentPage + 1,
             min: "1",
             max: state.value.total || 1,
-            onInput: (event) => {
+            onBlur: (event) => {
               handleInput(event);
+            },
+            onKeyDown: (event) => {
+              if (event.key === "Enter") {
+                handleInput(event);
+              }
             }
           }
         ),
@@ -18769,6 +18759,7 @@ const FilePreviewImageGroup = (props) => {
             className: "control-btn",
             onClick: (event) => {
               controller.zoomOutPreview(event);
+              handleImageResize();
             },
             children: /* @__PURE__ */ u("span", { className: "icon", children: /* @__PURE__ */ u(ZoomOutSvg, {}) })
           }
@@ -18784,6 +18775,7 @@ const FilePreviewImageGroup = (props) => {
             className: "control-btn",
             onClick: (event) => {
               controller.zoomInPreview(event);
+              handleImageResize();
             },
             children: /* @__PURE__ */ u("span", { className: "icon", children: /* @__PURE__ */ u(ZoomInSvg, {}) })
           }
@@ -18796,6 +18788,7 @@ const FilePreviewImageGroup = (props) => {
           className: "control-btn",
           onClick: () => {
             controller.reSet();
+            handleImageResize();
           },
           children: /* @__PURE__ */ u("span", { className: "icon", children: /* @__PURE__ */ u(ResetSvg, {}) })
         }
@@ -19048,7 +19041,7 @@ class FilePreviewImageController extends FilePreviewItemController {
   zoomOutPreview(_event) {
     const { scale } = this.state.value;
     this.updateState({
-      scale: Math.max(scale - 0.1, 0.1)
+      scale: Math.max(scale - 0.1, 0.5)
     });
   }
   /**
@@ -19931,6 +19924,19 @@ class FilePreviewMDController extends FilePreviewTextController {
   }
 }
 class FilePreviewHtmlController extends FilePreviewTextController {
+  /**
+   * 获取内容
+   */
+  async getContent() {
+    const options = this.filePreviewShell.getOptions();
+    const { fileId, fileCat } = this.filePreviewShell.getState();
+    try {
+      const content = await options.getContent(fileId, "html", fileCat);
+      return content || "";
+    } catch (error2) {
+      return error2.message || "";
+    }
+  }
 }
 class FilePreviewItemDispatcher {
   /**